<template>
  <div>
    <div>
      <el-form :inline="true" class="demo-form-inline" size="small">
        <el-form-item label="" size="small" class="form_head">
          <el-select v-model="phoneZeroTwo_" placeholder="电话前3位">
            <el-option v-for="item in phoneZeroTwo" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="" class="form_head">
          <el-select v-model="province_" placeholder="省份">
            <el-option v-for="item in province" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="" class="form_head">
          <el-select v-model="city_" placeholder="市区">
            <el-option v-for="item in city" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="" class="form_head">
          <el-select v-model="operator_" placeholder="运营商">
            <el-option v-for="item in operator" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="" class="form_head">
          <el-input v-model="phoneSevenEleven" placeholder="电话后4位"></el-input>
        </el-form-item>

        <el-form-item class="form_head">
          <el-button type="primary" @click="search_phone">查询</el-button>
        </el-form-item>
      </el-form>
    </div>


    <div style="width: 700px;margin: 0 auto;">
      <p style="margin: 100 0;text-align: left;">为您查询到号码: <a style="color: red;">{{tableData.length}}</a> 条</p>
      <el-table :data="tableData" border style="width: 601px">
        <el-table-column fixed prop="phone" label="电话号码" width="150">
        </el-table-column>
        <el-table-column prop="province" label="省份" width="150">
        </el-table-column>
        <el-table-column prop="city" label="市区" width="150">
        </el-table-column>
        <el-table-column prop="operator" label="运营商" width="150">
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>



<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        phoneZeroTwo: ["130", "131", "132", "133", "134", "135", "136", "137", "138", "139", "141", "145", "146", "147",
          "149", "150", "151", "152", "153", "154", "155", "156", "157", "158", "159", "165", "166", "167", "170",
          "171", "172", "173", "174", "175", "176", "177", "178", "180", "181", "182", "183", "184", "185", "186",
          "187", "188", "189", "191", "198", "199",
        ],
        phoneZeroTwo_: '',
        province: ["广东"],
        province_: '',
        city: ["深圳", "东莞", "惠州"],
        city_: '',
        operator: ["电信", "联通", "移动"],
        operator_: '',
        phoneSevenEleven: '',
        tableData: []
      }
    },
    methods: {
      onSubmit() {
        // console.log('submit!');
        alert("查询成功")
      },
      search_phone() {
        if (!this.phoneZeroTwo_ | !this.province_ | !this.city_ | !this.operator_ | !this.phoneSevenEleven) {
          throw "参数错误";
        };

        var url = "/phone-search/graphql_doc_ui";
        var data = {
          operationName: "phoneSearch",
          query: "query phoneSearch($condition: phoneSearch_argument){  phoneSearch(condition:$condition){    count    results{      phone11      province      operators      city    }  }}",
          variables: {
            condition: {
              phone0_2: this.phoneZeroTwo_,
              phone7_10: this.phoneSevenEleven,
              province: this.province_,
              city: this.city_,
              operators: [this.operator_]
            }
          }
        }
        axios.post(url, data).then(res => {
          var data = res.data.data.phoneSearch;
          var results = data.results;
          var tables = [];
          for (var i = 0; i < results.length; i++) {
            tables.push({
              phone: results[i].phone11,
              province: results[i].province,
              operator: results[i].operators,
              city: results[i].city
            })
          };
          console.log(tables)
          this.tableData = tables;
        })

      },
      getMapping() {}


    }
  }
</script>

<style>
  #phone7_11 {
    display: inline;
    width: 200px;
  }

  .form_head {
    width: 150px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 50px;
  }
</style>
